<script setup lang="ts">
import { useAppStore } from '@/store';
import Tools from '@/utils/tools';

interface IProps {
  data: IProductInformation;
  count?: number;
  hasSku?: boolean;
}
const props = defineProps<IProps>();
const store = useAppStore();
const shoppingCart = ref<IProductInformation[]>(store.$state.shoppingCart);

onUnmounted(() => {
  unsubscribe();
});

// store全局监听
const unsubscribe = store.$subscribe((mutation, storeState) => {
  if (Array.isArray(mutation.events)) return;
  if (mutation.events.key === 'shoppingCart') {
    shoppingCart.value = storeState.shoppingCart;
  }
});
</script>

<template>
  <view class="flex items-center h-full" v-if="Tools.hasActiveRange(props.data, shoppingCart, props.count || 0, props.hasSku || false)">
    <text class="text-red fw-bold c-text-12 mr-2px mt-3px">¥</text>
    <text class="text-red fw-bold c-text-16">{{ props.data.active.activePrice }}</text>
    <text class="c-text-color-grey c-text-12 ml-6px line-through mt-1px">¥{{ hasSku ? props.data.salePrice : props.data.price }}</text>
  </view>
  <view class="flex items-center h-full" v-else>
    <text class="text-red fw-bold c-text-12 mr-2px mt-3px">¥</text>
    <text class="text-red fw-bold c-text-16">{{ props.data.salePrice }}</text>
    <text class="c-text-color-grey c-text-12 ml-6px line-through mt-1px" v-if="props.data.salePrice !== props.data.price">¥{{ props.data.price }}</text>
  </view>
</template>
